<template>
  <div class="view-fill">
    <div class="app-container-flex" v-show="!showModify.visible">
      <NewFullScreen
        v-model="showDialog"
        title="巡检点详情"
        :btn-list="fullInfo.btnList"
        @returnBack="returnBack"
      >
        <template v-slot:full-button>
          <el-button v-if="$permission('patrolArea:edit')" @click="update"
            >编辑</el-button
          >
        </template>
        <div class="model-panel model-panel-left">
          <div class="model-panel-title">
            <p>{{ $t('basic_information') }}</p>
          </div>
          <div class="model-panel-body">
            <div class="model-panel-body">
              <basic-information :info="infoList">
                <template v-slot:basic-referenceRange>
                  <p>
                    {{ infoList.data.referenceRangeStart }}-{{
                      infoList.data.referenceRangeEnd
                    }}
                  </p>
                </template>
              </basic-information>
            </div>
          </div>
        </div>

        <div class="model-panel model-panel-left">
          <div class="model-panel-title">
            <Tooltip :text="$t('patrol_item_detail')" />
          </div>
          <div class="model-panel-body">
            <div class="flex_full_item">
              <!-- 表格 -->
              <page-table
                :refresh="tableInfo.refresh"
                :init-curpage="tableInfo.initCurpage"
                v-model:data="tableInfo.data"
                :pager="false"
                :tabIndex="true"
                :check-box="false"
                :field-list="tableInfo.fieldList"
                :isDynamic="true"
              >
              </page-table>
            </div>
          </div>
        </div>

        <div class="model-panel model-panel-right">
          <div class="model-panel-body">
            <div class="flex_full_item">
              <el-tabs v-model="clickName" @tab-click="handleTabClick">
                <el-tab-pane
                  class="model-panel-title"
                  label="基本信息"
                  name="first"
                >
                  <basic-information :info="basicInfoList"></basic-information>
                </el-tab-pane>
                <el-tab-pane
                  class="model-panel-title"
                  label="操作流水"
                  name="second"
                >
                  <Timeline :list="affairTableInfo.data" />
                </el-tab-pane>
              </el-tabs>
            </div>
          </div>
        </div>
      </NewFullScreen>
    </div>
    <order-modify
      v-if="showModify.visible"
      v-model:visible="showModify.visible"
      :id="id"
      :type="showModify.type"
      :title="showModify.title"
      @returnBack="modifyCallback"
    />
  </div>
</template>

<script setup name="patrolAreaDetail">
import { getPatrolAreaById, getPatrolItemCustomizeListPage } from '@/api/core'
import { orderOpAffairAll } from '@/api/affair'
import { getCustomizeSetting } from '@/api/customize'
import OrderModify from './modify'

const { proxy } = getCurrentInstance()
const emits = defineEmits()
const props = defineProps(['visible', 'id', 'pageType'])

const showModify = ref({
  title: '修改巡检点',
  type: 'update',
  visible: false,
})
const activeName = ref('first')
const clickName = ref('first')
const basicInfoList = ref({
  data: [],
  fieldList: [
    {
      label: '名称',
      value: 'areaName',
      type: 'text',
    },
    {
      label: '巡检路线',
      value: 'patrolRouteName',
      type: 'text',
    },
    {
      label: '类型',
      value: 'patrolAreaTypeValue',
      type: 'text',
    },
    {
      label: '资产',
      value: 'assetName',
      type: 'text',
    },
    {
      label: '资产卡片号',
      value: 'assetCode',
      type: 'text',
    },
    {
      label: '创建人',
      value: 'createUserName',
      type: 'text',
    },
    {
      label: '创建时间',
      value: 'createTime',
      type: 'text',
    },
    {
      label: '最后更新人',
      value: 'updateUserName',
      type: 'text',
    },
    {
      label: '最后更新时间',
      value: 'updateTime',
      type: 'text',
    },
  ],
  noAssetFieldList: [
    {
      label: '名称',
      value: 'areaName',
      type: 'text',
    },
    {
      label: '巡检路线',
      value: 'patrolRouteName',
      type: 'text',
    },
    {
      label: '类型',
      value: 'patrolAreaTypeValue',
      type: 'text',
    },
    {
      label: '创建人',
      value: 'createUserName',
      type: 'text',
    },
    {
      label: '创建时间',
      value: 'createTime',
      type: 'text',
    },
    {
      label: '最后更新人',
      value: 'updateUserName',
      type: 'text',
    },
    {
      label: '最后更新时间',
      value: 'updateTime',
      type: 'text',
    },
  ],
})
// 过滤相关配置
const filterInfo = ref({
  query: {
    customizeUserVO: {},
    queryMap: {
      id: {
        queryType: 'IN',
        queryCategory: 'AND',
        value: '',
      },
    },
    queryParams: {},
  },
})
const tableInfo = ref({
  refresh: 1,
  initCurpage: 1,
  data: [],
  map: new Map(),
  isSysGroup: true,
  sysGroup: [],
  selections: [],
  fieldList: [],
  handle: {},
})
const infoList = ref({
  data: {},
  fieldList: [
    {
      label: '名称',
      value: 'areaName',
      type: 'text',
    },
    {
      label: '编码',
      value: 'areaCode',
      type: 'text',
    },
    {
      label: '巡检路线',
      value: 'patrolRouteName',
      type: 'text',
    },
    {
      label: '类型',
      value: 'patrolAreaTypeValue',
      type: 'text',
    },
    {
      label: '资产',
      value: 'assetName',
      type: 'text',
    },
    {
      label: '资产卡片号',
      value: 'assetCode',
      type: 'text',
    },
    {
      label: '位置',
      value: 'location',
      type: 'text',
    },
    {
      label: '巡检说明',
      value: 'inspectionDesc',
      type: 'text',
    },
  ],
  noAssetFieldList: [
    {
      label: '名称',
      value: 'areaName',
      type: 'text',
    },
    {
      label: '编码',
      value: 'areaCode',
      type: 'text',
    },
    {
      label: '巡检路线',
      value: 'patrolRouteName',
      type: 'text',
    },
    {
      label: '类型',
      value: 'patrolAreaTypeValue',
      type: 'text',
    },
    {
      label: '位置',
      value: 'location',
      type: 'text',
    },
    {
      label: '巡检说明',
      value: 'inspectionDesc',
      type: 'text',
    },
  ],
})
const fullInfo = ref({
  btnList: [],
})
// 操作流水
const affairTableInfo = ref({
  data: [],
  query: {
    orderType: 56,
    orderId: props.id,
    sort: 'operate_time desc',
  },
})

const showDialog = computed({
  get() {
    return props.visible
  },
  set(newValue) {
    emits('update:visible', newValue) // 更新父组件visible
  },
})

watch(
  () => infoList.value.data.patrolAreaType,
  (value) => {
    if (value == '1') {
      infoList.value.fieldList = infoList.value.noAssetFieldList
      basicInfoList.value.fieldList = basicInfoList.value.noAssetFieldList
    }
  }
)

setData()
function setData() {
  let obj = {
    itemName: {
      label: '名称',
      value: 'itemName',
      componentType: 'input',
      show: false,
      hidden: true,
    },
  }
  tableInfo.value.fieldList = Object.values({
    ...proxy.$fn.deepClone(proxy.$fieldfList.FieldList),
    ...proxy.$fn.deepClone(obj),
  })
  filterInfo.value.searchList = Object.values({
    ...proxy.$fn.deepClone(proxy.$fieldfList.FieldList),
    ...proxy.$fn.deepClone(obj),
  })
  getCustomize()
}
function modifyCallback() {
  getMain()
}
function update() {
  showModify.value.visible = true
}
function handleTabClick(tab) {
  const name = tab.paneName
  if (name == 'first') {
    getMain()
  } else if (name == 'second') {
    getAffairList()
  }
}
function returnBack() {
  emits('returnBack')
}
function getAffairList() {
  orderOpAffairAll(affairTableInfo.value.query).then((resp) => {
    if (resp && resp.success) {
      affairTableInfo.value.data = resp.data
    }
  })
}
function getMain() {
  getPatrolAreaById(props.id).then((resp) => {
    if (resp && resp.success) {
      infoList.value.data = resp.data
      basicInfoList.value.data = resp.data
      const patrolItemIds = resp.data.patrolItemIds
      if (patrolItemIds) {
        const patrolItemId = patrolItemIds.join(',')
        filterInfo.value.query.queryMap.id.value = patrolItemId.toString()
        getList()
      }
      if (!resp.data) {
        showDialog.value = false
        emits('returnBack')
      }
    }
  })
}
function getList() {
  getPatrolItemCustomizeListPage(filterInfo.value.query).then((res) => {
    if (res && res.success) {
      tableInfo.value.data = res.data
    }
  })
}
function getCustomize() {
  let _tableInfo = tableInfo.value
  let param = {
    tableKey:
      'repairSettingsPatrolItemForAreaDetail-com.slip.spd.entity.vo.core.CorePatrolItemVO',
  }
  getCustomizeSetting(param).then((res) => {
    if (res && res.success) {
      let data = res.data
      _tableInfo.fieldList = proxy.$fn.setFieldList(
        _tableInfo.fieldList,
        data.detail
      )
      filterInfo.value.query.customizeUserVO = data
      if (props.id) {
        getMain()
      }
    }
  })
}
</script>
<style scoped lang="scss">
:deep(.el-tabs) .el-tabs__header {
  padding: 0 2px !important;
  box-sizing: border-box;
}

:deep(.el-tabs) .el-tabs__nav-wrap::after {
  height: 1px !important;
}
.model-panel-left {
  width: 73%;
  float: left;
  margin-right: 10px;
}
.model-panel-right {
  width: 25%;
}
</style>
